<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="未完成" name="1">
        <p v-for="(item, i) in this.$store.state.wwc" :key="'A' + i">
          <span> <input type="checkbox" @click="inp(item, i)" />{{ item }} </span>
          <button @click="qx(item, i)">取消</button>
        </p>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <p v-for="(items, i) in $store.state.ywc" :key="'B' + i">
          <span> <input type="checkbox" checked disabled />{{ items }} </span>
          <span>{{ t | formatTimer }}</span>
          <button @click="rem_del(i)">删除</button>
        </p>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3"
        ><p v-for="(ele, i) in this.$store.state.yqxs" :key="'C' + i">
          <span>{{ ele }}</span
          ><button @click="hfs(ele, i)">恢复</button>
        </p></van-collapse-item
      >
    </van-collapse>
  </div>
</template>

<script>
import bus from "@/assets/Bus.js";
export default {
  name: "",
  data() {
    return {
      text: "",
      t: new Date(),
      activeNames: [],
    };
  },

  mounted() {
    // 数据传输
    bus.$on("a", (data) => {
      console.log(data);
      this.text = data;
    });
    // 未完成折叠
    bus.$on("num", (data) => {
      console.log(data);
      this.activeNames.push(data);
    });
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer1 = setInterval(() => {
      _this.timer = new Date(); // 修改数据date
    }, 1000);
    //判断如果存储的数据只要有一个没有时折叠收起
    if (
      this.$store.state.wwc.length ||
      this.$store.state.yqxs.length ||
      this.$store.state.ywc.length == 0
    ) {
      this.activeNames.push("0"); //给绑定数据赋值空
    }
  },
  beforeDestroy() {
    if (this.timer1) {
      clearInterval(this.timer1); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  filters: {
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  methods: {
    // 未完成
    qx(item, index) {
      // console.log(index);
      this.$store.commit("wwc", item);
      this.$store.commit("rem_wwc", index);
      this.activeNames.push("3"); //
    },
    //已完成
    inp(item, index) {
      console.log(item);
      this.$store.commit("zms_ywc", item);
      this.$store.commit("rem", index);
      this.activeNames.push("2");
    },
    rem_del(index) {
      this.$store.commit("rem_ywc", index);
    },
    //已取消
    hfs(ele, index) {
      console.log(index);
      this.$store.commit("hf", ele);
      this.$store.commit("rem_yqx", index);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="scss">
.van-collapse {
  p {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
  }
}


</style>
